import * as THREE from "three";
// 导入dat.gui
import * as dat from "dat.gui";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入Objloader
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
// 导入mtlloader
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(10, 10, 10);
// 相机初始视角
camera.lookAt(0, 0, 0);
// 创建渲染器 antialias:抗锯齿
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 设置渲染器dpi 清晰度有关
renderer.setPixelRatio(window.devicePixelRatio);
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建坐标系
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);
var ambientLight = new THREE.AmbientLight("white");
scene.add(ambientLight);
// 创建一个立方体
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// const mtlloader = new MTLLoader();
// mtlloader.setPath("./src/assets/");
// mtlloader.load("安卓宝宝.mtl", function (materials) {
//   materials.preload();
//   var objLoader = new OBJLoader();
//   objLoader.setMaterials(materials);
//   objLoader.setPath("./src/assets/");
//   objLoader.load("安卓宝宝.obj", function (object) {
//     object.position.y = 1;
//     scene.add(object);
//   });
// });

// gui
const gui = new dat.GUI();
/**
 * @param Object 控制的对象
 * @param attr   控制的属性，最小值，最大值，步进
 */

// 分组
const guiPosition = gui.addFolder("位置控制");
guiPosition.add(cube.position, "x", -10, 10, 0.1);
guiPosition.add(cube.position, "y", -10, 10, 0.1);
guiPosition.add(cube.position, "z", -10, 10, 0.1);

const guiRotation = gui.addFolder("旋转控制");
const data = {
    x:0,
    y:0,
    z:0
}
// 角度转换工具 度转换为弧度
guiRotation.add(data, "x", -180, 180, 1).onChange((value)=>{
    cube.rotation.x = THREE.MathUtils.degToRad(value);
});
guiRotation.add(data, "y", -180, 180, 1).onChange((value)=>{
    cube.rotation.y = THREE.MathUtils.degToRad(value);
});
guiRotation.add(data, "z", -180, 180, 1).onChange((value)=>{
    cube.rotation.z = THREE.MathUtils.degToRad(value);
});

const guiScale = gui.addFolder("缩放控制");
guiScale.add(cube.scale, "x", -10, 10, 0.1);
guiScale.add(cube.scale, "y", -10, 10, 0.1);
guiScale.add(cube.scale, "z", -10, 10, 0.1);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 创建网络辅助工具
// 网格单元格大小
const size = 20;
// 网格大小
const divisions = 20;
const gridHelper = new THREE.GridHelper(size, divisions, 0x00bfff, 0x00bfff);
// 添加透明度
gridHelper.material.transparent = true;
gridHelper.material.opacity = 0.5;
scene.add(gridHelper);

// renderer.render(scene, camera)

// 常用的自更新动画函数
renderer.setAnimationLoop(animate);

// 定义一个立方体旋转的动画函数
function animate() {
  // 旋转方法1
  // cube.rotation.x += 0.01
  // cube.rotation.y += 0.01
  // cube.rotation.z += 0.01
  // 旋转方法2
  // cube.rotation.set(0.01, 0.01, 0.01)

  // 移动方法1
  // cube.position.x += 0.01
  // cube.position.y += 0.01
  // cube.position.z += 0.01
  // 移动方法2
  //   cube.position.set(1, 1, 1);

  // 缩放方法1
  // cube.scale.x = 1
  // cube.scale.y += 0.01
  // cube.scale.z += 0.01
  // 缩放方法2
  //   cube.scale.set(1, 1, 1);

  // 重新渲染
  renderer.render(scene, camera);
  // requestAnimationFrame(animate)
}
animate();

// 自适应画布大小
window.addEventListener("resize", () => {
  // 重新设置渲染器大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重新设置相机大小
  camera.aspect = window.innerWidth / window.innerHeight;
  // 重新设置相机
  camera.updateProjectionMatrix();
});
